<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
    <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
    <style>
        /* 下面我们会解释这些 class 是做什么的 */
        .v-enter-active,
        .v-leave-active {
            transition: opacity 1s ease;
        }

        .v-enter-from,
        .v-leave-to {
            opacity: 0;
        }
        .my-enter-active,
        .my-leave-active {
            transition: opacity 1s ease;
        }

        .my-enter-from,
        .my-leave-to {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="isShow = !isShow">切换显示</button>
        <!-- 加了transition，和对应属性，会自动添加 class -->
        <!-- <transition >
            <h1 v-show="isShow">锄禾日当午</h1>
        </transition> -->

        <!-- 使用 transition 会在不同阶段给我们添加不同的 class 名称 -->
        <!-- appear 设置初始过渡效果 -->
        <!-- name 属性用来设置 class 使用什么开头,比如name=“my”则用 my-enter-active 没有设置name的时候是 v-enter-active -->
        <!-- <transition appear name="my">
            <h1 v-show="isShow" >锄禾日当午</h1>
        </transition> -->

        <transition appear enter-active-class="animate__animated animate__bounce"
            leave-active-class="animate__animated animate__backOutDown">
            <h1 v-show="isShow">锄禾日当午</h1>
        </transition>


        <!-- 过渡动画可以有多个根标签 -->
        <!-- <transition-group>
            <h1 :key="1" v-show="isShow">锄禾日当午</h1>
            <h1 :key="2" v-show="isShow">锄禾日当午</h1>
        </transition-group> -->

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                isShow: true
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>